<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    
	
	<title>_执行拣货任务</title>
	<script type="text/javascript">
	
	 
	 var areaInfo="";
	 var errorFlag=0;
	
	 $(function() {
          $("#area").focus();
          $("#area").val("");
          $("#sku").val("");
          $("#message").val("");
          $("[name='areaInfo']").val('');
          
          
         var status='${task.status}';
		 if(status=='3' || status=='4'){
		    $("#finish_btn").attr("disabled", true);
	        $("#finish_btn").attr("class", "btn");
	        $("#reload_btn").attr("disabled", true);
	        $("#reload_btn").attr("class", "btn");
	        $("#area").attr("readonly",true);
	        $("#sku").attr("readonly",true);
		 }
          
     });
     
	
	//库位编码
	function area(element){
	   //验证库位编码是否存在
	   if(1==1){
	     $("#sku").focus();
	     $("#sku").val("");
	   }else{
	     $("#area").focus();
	     $("#area").select();
	     $("#message").animate({width:200},200);
	     $("#message").val("库位编码录入有误，请检查...");
	   }
	   
	}
	
	//sku编码
	function sku(element){
	
	  var sku=$(element).val();
	 
	  var flag=0;
	  
	  $("[name='td_sku']").each(function(){
	     var _sku=$(this).attr("id").substring(4);
	     if(_sku==sku){
	        flag=1;
	     }
	  });
	  
	  if(flag==0){
	     $("#message").animate({width:200},200);
         $("#message").val("sku编码录入有误，请检查...");
         $("#sku").focus();
         $("#sku").select();
	  }else{
         var num1_id="#num1_"+sku;
         var num2_id="#num2_"+sku;
         var areaInfo_id="#areaInfo_"+sku;
         
         var num2=$(num2_id).html();
         $(num2_id).html(Number(num2)+1); 
         
         var area=$("#area").val();
         var areaInfo=$(areaInfo_id).val();
         $(areaInfo_id).val(areaInfo+area+";");
         
         $("#message").animate({width:200},200);
	     $("#message").val("扫描成功，请拣货!");
		 $("#sku").val("");
		 $("#area").val("");
		 $("#area").focus();
	  }
	  
	}
	
	 //提示框动画效果
	 var effectFlag=0;
	 function effect(){
	   effectFlag=1;
	 }
	 function keyDown(){
		 if(effectFlag==1){
		    $("#message").animate({width:0},200);
		   effectFlag=0;
		 }
	 }
	 
	 function finish(){
	 
	  var flag=0; 
	  var errorFlag=0;
	  var takeGoodsArray=new Array();
	  
	  $("[name='td_sku']").each(function(){
	     var sku=$(this).attr("id").substring(4);
	     
	     
	     var areaInfo_id="#areaInfo_"+sku;
	     var errorFlag_id="#errorFlag_"+sku;
	     var taskItemId_id="#taskItemId_"+sku;
	     var num1_id="#num1_"+sku;
         var num2_id="#num2_"+sku;
	    
	     var num1=$(num1_id).html();
	     var num2=$(num2_id).html();
	     var taskItemId=$(taskItemId_id).val();
	     var areaInfo=$(areaInfo_id).val();
	     var _errorFlag;
	     
	     if(num1==num2){
	        $(num1_id).parent('tr').css("background-color",'');
	        _errorFlag='0';
		 }else{
	        $(num1_id).parent('tr').css("background-color",'yellow');
	         _errorFlag='1';
	        flag=1;
		 }
		 $(errorFlag_id).val(_errorFlag);
		 
		 var takeGoodsInfo=createInfo(taskItemId,num2,areaInfo,_errorFlag);
		 takeGoodsArray.push(takeGoodsInfo);
	     
	  });
	  
	  
	  if(flag==1){
	      var r=confirm("实际上架数量异常，你确定完成上架吗？");
	      if(r==false){
    		return;
	      }else{
	        errorFlag=1;
	      }
	  }
	  
	  //拣货信息
      var takeGoodsList = eval(takeGoodsArray); 
      var takeGoodsInfo = JSON.stringify(takeGoodsList);
  
	  $.ajax({
			type:'post',
			url:'${ctx}/allotTask/ajaxTakeGoods',
			data:{
			    takeGoodsInfo:takeGoodsInfo,
				errorFlag:errorFlag,
				taskId:'${taskId}'
			},
			dataType:'json',
			success:function(data) {
			    if(data==true){
			      alert("此任务已完成！");
			      
			      $("#finish_btn").attr("disabled", true);
			      $("#finish_btn").attr("class", "btn");
			      
			      $("#reload_btn").attr("disabled", true);
			      $("#reload_btn").attr("class", "btn");
			      
			      $("#area").attr("readonly",true);
        		  $("#sku").attr("readonly",true);
				  
			    }else{
			      alert("网络繁忙，请稍后重试...");
			    }
			},
			error:function() {
				alert("网络繁忙，请稍后重试...");
			}
	   });
	   
	 }
	 
	 //创建入库信息对象
	function createInfo(taskItemId,num,areaInfo,errorFlag){
	    return {
	        taskItemId:taskItemId,
	        num:num,
	        areaInfo:areaInfo,
	        errorFlag:errorFlag
	    };
	}
	
	
	  function showDetail(e){
	      var id=$(e).attr("id");
	      var info=id.split("_");
	      var customerCode=info[0];
	      var areagroupCode=info[1];
	      var sku=info[2];
	      
	      var name=$(e).attr("name");
	      var info2=name.split("_");
	      var customerName=info2[0];
	      var areagroupName=info2[1];
	      
	      $("#_customerName").html(customerName);
	      $("#_areagroupName").html(areagroupName);
	      $("#_sku").html(sku);
	      
	      $.ajax({
			    type : 'post',
				url : '${ctx}/stock/stockDetail',
				data : {
					customerCode:customerCode,
					areagroupCode:areagroupCode,
					sku:sku
				},
				dataType : 'json',
				success : function(data) {
					var stockList = data.stockList;
					
					//库位信息
					$("#detail_content").html("");
					var str='';
					$.each(stockList, function(i) {
					   var stock=stockList[i];
					   str+="<tr>";
					   str+="<td>"+stock.stockCode+"</td>";
					   str+="<td>"+stock.salesNum+"</td>";
					   str+="<td>"+stock.unusedNum+"</td>";
					   str+="<td>"+stock.orderNum+"</td>";
					   str+="<td>"+stock.lockedNum+"</td>";
					   str+="<td>"+stock.transportNum+"</td>";
					   str+="<td>"+stock.airNum+"</td>";
					   str+="<td>"+stock.totalNum+"</td>";
					   str+="</tr>";
					});
					$("#detail_content").html(str);
					
				},
				error : function() {
					alert("网络繁忙，请稍后重试...");
				}
			}); 
	  }
		
    </script>
</head>

<body>
	<div style="height: 10px;"></div>
	
	<table id="contentTable" class="table table-striped table-bordered table-condensed">
	    <thead>
			<th style="vertical-align: middle; color: white;" colspan="9" bgcolor="#8EB4CB">编码扫描区</th>
		</thead>
		<thead>
		     <th style="vertical-align: middle; height: 50px;" colspan="5" >
		     <span style="margin-left: 0px; vertical-align: middle;">库位编码：<input type='text' style='width: 200px;vertical-align: middle;' id="area" onchange="area(this);" onfocus="effect();" onkeydown="keyDown();"></span>
		      <span style="margin-left: 10px; vertical-align: middle;">SKU编码：<input type='text' style='width: 200px;vertical-align: middle;' id="sku" onchange="sku(this);" onfocus="effect();" onkeydown="keyDown();"></span>
		      <input type='text' style='width:0px; margin-left:20px; margin-top:7px; height:30px; border:none; font-weight:bold;  background-color:#B0CEA3';" id="message" />
		     </th>
		  </thead>
	</table>
	
	<table id="contentTable" class="table  table-bordered table-condensed">
	    <thead>
			<th style="vertical-align: middle; color: white;" colspan="7" bgcolor="#8EB4CB">拣货信息</th>
		</thead>
		<thead><tr>
		    <th style="width: 100px;">任务批次号</th>
		    <th style="width: 100px;">拣货仓库</th>
		    <th style="width: 50px;">商家</th>
			<th style="width: 50px;">SKU编号</th>
			<th style="width: 80px;">任务分配数量（件）</th>
			<th style="width: 80px;">实际拣货数量（件）</th>
			<th style="width: 80px;">查看库位</th>
		</tr></thead>
		<tbody>
		 <c:forEach items="${taskItemList}" var="taskItem">
			<tr>
			   <td>
			     ${taskItem.taskCode}
			     <input type="hidden" id="taskItemId_${taskItem.sku}" value="${taskItem.id}"/>
			     <input type="hidden" id="areaInfo_${taskItem.sku}" name="areaInfo" value=""/>
			     <input type="hidden" id="errorFlag_${taskItem.sku}" value=""/>
			   </td>
			   <td>${taskItem.task.allot.outstorage.groupName}</td>
			   <td>${taskItem.customerCode}</td>
			   <td id="sku_${taskItem.sku}" name="td_sku">${taskItem.sku}</td>
			   <td id="num1_${taskItem.sku}">${taskItem.num}</td>
			   <td id="num2_${taskItem.sku}" style="color: blue;">0</td>
			   <td>
				     <a href="#detail" data-toggle="modal" class="btn btn-info "
				      name="${taskItem.customerCode}_${taskItem.task.allot.outstorage.groupName}_${taskItem.sku}"
				      id="${taskItem.customerCode}_${taskItem.task.allot.outstorage.groupCode}_${taskItem.sku}" onclick="showDetail(this);">查看</a>
				</td>
			</tr>
		</c:forEach> 
		<tr>
		  <td colspan="7">
		     <input id="finish_btn" class="btn btn-primary" type="submit" value="拣货完成" onclick="finish();" />&nbsp;	
			 <input id="reload_btn" class="btn btn-danger" type="button" value="重新扫描拣货" onclick="location.reload();" />&nbsp;
		  </td>
		</tr>
		</tbody>
	</table>
	
	<div class="form-actions">
	     <a href="${ctx}/allotTask" data-toggle="modal" class="btn btn-info" >返回</a>
	</div>
	
	<!-- 库存明细 -------------------------------------------------------------------------------------------------->
	<div style="display: none; width:880px;" class="modal hide fade"  id="detail" >
	<form id="inputForm"  method="post" class="form-horizontal">
	
		<!-- 头 -->
		<div class="modal-header" style="height: 0px;" ></div>
		<!-- 体 -->
		<div class="modal-body" style="height: 400px;">
		
		   <table class="table table-striped table-bordered table-condensed" >
        	  <thead>
			    <th style="color: white;" bgcolor="#8EB4CB">库存网点</th>
			    <th style="color: white;" bgcolor="#8EB4CB">商家</th>
			    <th style="color: white;" bgcolor="#8EB4CB">sku编码</th>
			  </thead>
	          <tr>
	             <td id="_areagroupName"></td>
	             <td id="_customerName"></td>
	             <td id="_sku"></td>
	          </tr>
	        </table>  
		
			<table id="contentTable" class="table table-striped table-bordered table-condensed">
			<thead>
			<th style="vertical-align: middle; color: white;" bgcolor="#8EB4CB" colspan="8">库存信息</th>
			<tr>
			    <th style="width: 100px;">库位编码</th>
			    <th style="width: 100px;">可销售库存</th>
			    <th style="width: 100px;">不可销售库存</th>
			    <th style="width: 100px;">订单占用库存</th>
			    <th style="width: 100px;">锁定库存</th>
			    <th style="width: 100px;">调拨占用库存</th>
			    <th style="width: 100px;">调拨中库存</th>
			    <th>总量</th>
			</tr></thead>
			<tbody id="detail_content"></tbody>
			</table>		       
		      
		</div>
		<!-- 尾 -->
		<div class="modal-footer">
			<a class="btn btn-info" data-dismiss="modal" aria-hidden="true">返回</a>
		</div>
		
        </form> 
     </div>
     <!------------------------------------------------------------------------------------------------------------->
	
</body>
</html>
